$(function() {

    // 判断购物车是否有数据
    if (localStorage.getItem('goods')) {
        // 本地存储中的数据
        var goodsArr = JSON.parse(localStorage.getItem('goods'));
        var sum = 0;
        var prc;
        var n;
        // 获取数据并渲染
        $.ajax({
                url: '../data/index.json',
                type: 'get',
                dataType: 'json',
                success: function(data) {
                    // console.log(data['goodslist']) //所有数据
                    // 遍历所有数据
                    var lis = data['goodslist'];
                    // 这个是一个数组
                    $.each(lis, function(num, val) {
                        // 这个也是一个数组
                        $.each(goodsArr, function(index, obj) {
                            if (lis[num].id === obj.id) {
                                sum += lis[num].price * goodsArr[index].num;
                                $('.ban_t .s').html(sum);
                                var goodsDom = `
                                <li>
                                <div><input type="checkbox" class="xuan"></div>
                                <div><img src="${lis[num].imgurl}" alt=""></div>
                                <div>
                                    <p>
                                        <a href="#">${lis[num].title}</a>
                                    </p>
                                    <p>款号<span>#4434972UZIN4165</span></p>
                                    <p>款式:<span>${lis[num].det}</span></p>
                                </div>
                                <div class="n1">数量<span class="n">${goodsArr[index].num}</span></div>
                                <div class='p'>￥<em class="pc">${lis[num].price}</em></div>
                                <div class="del" data-id='${lis[num].id}'>删除</div>
                            </li>
                            `
                                $('.bao').append(goodsDom)
                                return;
                            }
                        })
                    })
                }
            })
            // ****************************************************************
            // 删除购物车数据
        var t;
        $('.bao').on('click', '.del', function() {
            // 获取要删除商品的id
            var idt = $(this).attr('data-id'); // 'xxx03'
            var b = $(this).parent().children(".p").children('.pc').html();
            console.log(b);
            // console.log($(this).parent());

            // 去除本地存储中相应数据
            $.each(goodsArr, function(index, item) {
                // console.log( item )
                if (goodsArr[index].id === idt) {
                    n = goodsArr[index].num;
                    sum = sum - b * n;
                    $('.ban_t .s').html(sum);
                    goodsArr.splice(index, 1); //删除当前下标的数
                    // console.log(goodsArr.length);
                    if (goodsArr.length > 0) {
                        // 更新本地存储数据
                        localStorage.setItem('goods', JSON.stringify(goodsArr))
                    } else {
                        localStorage.removeItem('goods')
                        var liDom = '<li class="wu">购物车暂无数据！</li>'
                        $('.bao').html(liDom)
                    }
                    // 删除点击元素的父级

                    return false;
                }
            })
            if ($(this).parent().children("div").children(".xuan").prop("checked")) {
                sum1 = sum1 - b * n;
                $('.sum').html(sum1);
            }
            $(this).parent().remove()
            addNum();
            // 遍历数据删除点击的商品数据
            alert('商品移出购物车成功！')
        })

        // 总数量

        var allNum;

        function addNum() {
            allNum = 0;
            $.each(goodsArr, function(index, item) {
                allNum += goodsArr[index].num;
            })
            $('.ban_t h3 em').html(allNum);
        }
        addNum();
        var qingdang = `<div class="ban_t">
    <h3><span>订单小计</span><span>已选 <em>${allNum}</em> 件商品</span></h3>
            <p><span>商品总计</span><span>￥<em class="s">${sum}</em></span></p>
            <p><span>运费</span><span>免费</span></p>
            <p><span>总计</span><span>￥<em class="sum">${sum}</em></span></p>
            <p>说明</p>
            <p>
                在线支付订单提交之后15分钟内未付款，订单将被系统自动取消，请您尽快完成支付以确保商品能及时送达，有货商品和门店配货商品是分开寄出。
            </p>
            <a href="#"><button class='btn1'>立即结算</button></a>
            <a href="./goodslist.html"><button class="btn2">继续购物</button></a>
            </div>`
        $('.ban_r').append(qingdang)
    }
    // 全选
    var sum1 = 0;
    $('.bao').on("click", ".quan", function() {

            if ($(this).prop("checked")) {
                $('.xuan').each(function(index, item) {
                    var p1 = $(this).parent().parent().children('.p').children('.pc').html();
                    var n1 = $(this).parent().parent().children('.n1').children('.n').html();
                    p1 = parseInt(p1);
                    n1 = parseInt(n1);
                    sum1 += p1 * n1;

                })
                $('.ban_t .sum').html(sum1);
                $(".xuan").prop("checked", true);
            } else {
                $(".xuan").prop("checked", false);
                sum1 = 0;
                $('.ban_t .sum').html(sum1);
            }
        })
        // 单选框
        // $('.bao').on("click", ".xuan", function() {
        //     $(".xuan").each(function(index, item) {
        //         // console.log("xuan");
        //         if (!$(this).prop("checked")) {
        //             // console.log("hahah");
        //             $(".quan").prop("checked", false);
        //             return;
        //         }
        //         $(".quan").prop("checked", true);
        //     })

    // })

    // 点击单选框价格变化
    var p2, n2;
    $('.bao').on("click", ".xuan", function() {
        //点击这个变为未选中
        if (!$(this).prop("checked")) {
            p2 = $(this).parent().parent().children('.p').children('.pc').html();
            n2 = $(this).parent().parent().children('.n1').children('.n').html();
            console.log(p2);
            console.log(n2);
            p2 = parseInt(p2);
            n2 = parseInt(n2);
            console.log(sum1);
            sum1 = sum1 - p2 * n2;
            $('.ban_t .sum').html(sum1);
            $(".quan").prop("checked", false);

        } else {
            p2 = $(this).parent().parent().children('.p').children('.pc').html();
            n2 = $(this).parent().parent().children('.n1').children('.n').html();
            p2 = parseInt(p2);
            n2 = parseInt(n2);
            sum1 = sum1 + p2 * n2;
            $('.ban_t .sum').html(sum1);
            //选上我就遍历全部
            $(".xuan").each(function(index, item) {
                // console.log("xuan");
                $(".quan").prop("checked", true);
                if (!$(this).prop("checked")) {
                    // console.log("hahah");
                    $(".quan").prop("checked", false);
                    return false;
                }

            })
        }


    })
})